<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>快递跟踪</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="layui/css/layui.css"  media="all">
  <link rel="stylesheet" href="css/oksub.css">
  <script type="text/javascript" src="lib/loading/okLoading.js"></script>
</head>
<body >
<div style="margin-top: 30px">
<form class="layui-form " lay-filter="form">
	<div class="layui-form-item">
	<label class="layui-form-label">快递单号</label>
		<div class="layui-input-inline" style="width: 250px">
			<input type="text" id="waybill" name="waybill" lay-filter="waybill" lay-verify="required" autocomplete="on" placeholder="请输入单号" class="layui-input">
		</div>
		<div class="layui-input-inline">
			<button class="layui-btn" lay-submit lay-filter="search">立即提交</button>
		</div>
	</div>
</form>
</div>

<div id="body">
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
  <legend>快递路径如下</legend>
</fieldset> 
</div>  
<script src="lib/layui/layui.js"></script>
<script>
layui.use(["element", "form", "jquery"], function () {
	let form = layui.form;
	let $ = layui.jquery;
	okLoading.close();
	
	  form.on('submit(search)', function(dataObj){
		  
		 $.post("api/scanRecord?op=select",dataObj.field,function(data){
			 
			 if(data.code==500){
				 $("#body").empty();
				 var html = "<fieldset class='layui-elem-field layui-field-title' style='margin-top: 30px;'>  <legend>单号输入错误，请重新输入</legend> </fieldset>";
				 $("#body").html(html);
			 }else if(data.code==200){
				$("#body").empty();
				var html = "<fieldset  class='layui-elem-field layui-field-title' style='margin-top: 30px;'>  <legend>快递路径如下</legend> </fieldset> <ul style='margin-left: 20px' class='layui-timeline'>";
				console.log(data);
				$.each(data.data, function (index, item) {
					console.log(item);
                   html += " <li class='layui-timeline-item'> " +
                   " <i class='layui-icon layui-timeline-axis'></i> " +
                   " <div class='layui-timeline-content layui-text'> " +
                   "   <h3 class='layui-timeline-title'>"+item.create_time+"</h3> " +
                   "  <p>" ;
                   if(item.type==3){
                	 html +="你的快递已经到达<b>" + item.network_name + "</b>,请耐心等待 " +
                     "   </p>" +
                     " </div>" +
                     " </li> ";
                   }else{
                  	 html +="你的快递已从上一网点发出，下一站：<b>" + item.network_name + "</b>,正在快马加鞭赶往你所在的城市" +
                     "   </p>" +
                     " </div>" +
                     " </li> ";
                   }
                });
				
				html += "</ul>";
				
				$("#body").html(html);
			 }
			 
		 })
		 return false;
		 
	  });
	
	
});



</script>

</body>
</html>